<template>
  <div class="wrap">
    <div class="card-table">
      <TableComponent :columns="docxColumns" :data="tableData" :tableOption="tableOption" :pageOption="publicForm.page" @change="pageChange" :total="total">
        <template scope="scope">
          <el-button type="text" @click="handleSee(scope.scope.row)" size="mini">查看</el-button>
        </template>
      </TableComponent>
    </div>
    <el-dialog title="查看" :visible.sync="dialogVisible" width="80%" top="5vh">
      <div ref="dialogBox2">
        <el-form ref="form" :model="addForm" label-width="70px" label-position="left" style="padding: 0 20px;" disabled>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="档案类型" prop="archivesType" style="margin-bottom: 12px">
                <el-select v-model="addForm.archivesType" size="small" class="select-item" style="width: 100%">
                  <el-option
                    v-for="item in archivesTypeOptions"
                    :key="item.index"
                    :label="item.value"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="档案名称" prop="archivesName" style="margin-bottom: 12px">
                <el-input v-model="addForm.archivesName" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="档案日期" prop="archivesDate" style="margin-bottom: 12px">
                <el-date-picker class="select-item" type="date" v-model="addForm.archivesDate" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
              <el-form-item label="档案说明" prop="explanation" style="margin-bottom: 12px">
                <el-input type="textarea" v-model="addForm.explanation"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <tableComponent
          class="table-file"
          :height="heightDialog2"
          :data="dialogTableData || []"
          :columns="fileTableEditColumns"
          :table-option="fileTableOption">
          <template scope="scope">
            <el-button @click="downLoadFile(scope.scope.row)" type="text" size="mini">下载</el-button>
          </template>
        </tableComponent>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableComponent from '@/components/Table/table'
import { docxColumns, fileTableEditColumns } from '../js/index.js'
import { taskArchives } from '@/api/modules/propertyRight.js'
import { queryOneArchives, queryArchivesTypes } from '@/api/modules/archivesManage.js'
export default {
  components: {
    TableComponent
  },
  data() {
    return {
      publicForm: {
        cmhkId: '',
        page: {
          pageNum: 1,
          pageSize: 10
        }
      },
      docxColumns,
      tableData: [],
      tableOption: {
        isShowOperate: true,
        operateWidth: '100px'
      },
      total: 0,
      // 文件弹窗=======
      dialogVisible: false,
      addForm: {
        archivesName: '',
        archivesType: '',
        archivesDate: '',
        explanation: ''
      },
      dialogTableData: [],
      archivesTypeOptions: [],
      fileTableEditColumns,
      fileTableOption: {
        isShowOperate: true,
      },
      heightDialog2: null,
      filetotal: 0
    }
  },
  methods: {
    queryDocx(params) {
      this.publicForm.cmhkId = params.cmhkId
      taskArchives(this.publicForm).then(res => {
        if (res.data.code === '0') {
          this.tableData = res.data.body.list
          this.total = res.data.body.total
        }
      })
    },
    handleSee(row) {
      this.dialogVisible = true
      // 查询注册类型
      queryArchivesTypes().then(res => {
        if (res.data.code === '0') {
          this.archivesTypeOptions = res.data.body
        }
      })
      const data = {
        cmhkId: row.cmhkId,
        archivesId: row.archivesId
      }
      queryOneArchives(data).then(res => {
        if (res.data.code === '0') {
          this.addForm = res.data.body
          this.dialogTableData = res.data.body.list
        }
      })
    },
    downLoadFile(row) {
      window.open(row.fileUrl)
    },
    pageChange(val) {
      this.publicForm.page = val
      this.queryDocx(this.publicForm)
    }
  }
}
</script>

<style lang="less" scoped>
  .wrap {
    .card-table {
      width: 100%;
    }
  }
</style>
